<template>
  <div>
    <h1>增加</h1>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>名称</td>
          <td>
            <input type="text" v-model="info.cnmae">
          </td>
        </tr>

        <tr>
          <td>类型</td>
          <td>
            <select v-model="info.lxin">
              <option :value="0">请选择</option>
              <option v-for="item in Xlk" :value="item.id">{{item.lxingcname}}</option>
            </select>
          </td>
        </tr>


        <tr>
          <td>图片</td>
          <td>
            <input type="file" @change="ToPian">
            <img :src="info.photo" width="50" height="50" alt="">
          </td>
        </tr>


        <tr>
          <td>状态</td>
          <td>
          <input type="radio" value="1" name="zt" v-model="info.zt">好
          <input type="radio" value="0" name="zt" v-model="info.zt">不好
          </td>
        </tr>

        <tr>
          <td></td>
          <td>
            <input type="button" value="增加" class="btn btn-success" @click="Ok">
          </td>
        </tr>
        
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
let route=useRoute();
let router=useRouter();

const info=reactive({
  "id": route.query.id,
  "cnmae": "",
  "zt": 1,
  "lxin": 0,
  "photo": "",
})
onMounted(()=>{
  Xlak();
  FanTian();
})

const FanTian=()=>{
  axios.get("https://localhost:7268/api/Tad/Fanti?id="+route.query.id)
  .then(res=>{
    info.cnmae=res.data.cnmae,
    info.zt=res.data.zt,
    info.lxin=res.data.lxin,
    info.photo=res.data.photo
  })
}
const Xlk =ref([{
    "id": 0,
    "lxingcname": ""
}])
const Xlak=()=>{
  axios.get("https://localhost:7268/api/Tad/Xlk").then(res=>{
   Xlk.value=res.data
  })
}
const ToPian=(e:any)=>{
  var fromdata=new FormData();
  var file=e.target.files[0];
  fromdata.append("file",file);
  axios.post("https://localhost:7268/api/Tad/pic",fromdata)
  .then(res=>{
    info.photo=res.data
  })
}
const Ok=()=>{
   axios.put("https://localhost:7268/api/Tad/UpdaXg",info)
   .then(res=>{
    if(res.data>0)
   {
    alert('修改成功');
    router.push('/tare');
   }
   else{
    alert('修改失败');
    return;
   }
   })
}


</script>

<style scoped>

</style>